<template>

    <el-form ref="form" :model="model" :rules="rules" label-width="100">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="名称" prop="name">
                <el-input  placeholder="请输入名称" v-model="model.name"/>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="标识" prop="label">
                <el-input  placeholder="请输入标识" v-model="model.label"/>
                </el-form-item>
            </el-col>
        </el-row>
    

    <el-row :gutter="20">
        <el-col :span="24">
            <el-form-item label="备注" prop="remark">
            <el-input  placeholder="请输入备注" v-model="model.remark"/>
            </el-form-item>
        </el-col>
    </el-row>

    <el-row :gutter="20">
        <el-col :span="24">
            <el-form-item label="权限" >
            <MenuCheck ref="menuCheck" @ok="handleMenuCheckOk" />
            </el-form-item>
        </el-col>
    </el-row>
        
    <el-row :gutter="20">
        <el-col :span="24">
            <el-form-item>
                <div style="width: 100%; text-align: right">
                <el-button type="dafaut" @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="handleConfirm">确认</el-button>
            </div>
            </el-form-item>  
        </el-col>
    </el-row>  
</el-form>      
</template>

<script>
import  MenuCheck  from "@/components/menu-check/index.vue";
//引入接口函数
import { addRole , upRole} from "@/api/role";
export default {
    components:{
        MenuCheck
    },
    data(){
        return{
            model:{
                id:0,
                name:'',
                label:'',
                remark:'',
                menuIdList:[],
            },
            rules:{
                name:[{ required : true, message:'必填' }],
                label:[{ required : true, message:'必填' }],
                
            }
        }
    },
    computed: {
    // 是否编辑模式
    isEditMode() {
      return this.model.id !== 0;
    },
  },
    methods:{
        /**
         * 
         * @param {处理ok} model 
         */
         handleMenuCheckOk(){
            this.$refs.menuCheck.set(this.model.menuIdList);
         },
        //设置model数据
        setModel(model){
            // this.model = model
            Object.assign(this.model,model);


            //对于menucheck组件 , 单独处理权限回填

            this.$refs.menuCheck.set(model.menuIdList);
        },
        /**
         * 取消函数
         */
        handleCancel(){
            //通知父组件取消
            this.$emit("cancel")
        },
        /**
         * 确认函数
         */
         async handleConfirm() {
      // 1. 表单校验
      await this.$refs.form.validate();
      // 2. 获取 勾选的菜单Id集合
      const menuIdList = this.$refs.menuCheck.get();
      //const menuIdList = this.$refs.menuCheck.get();
      // 3. 根据 isEditMode 来控制调用不同的接口
      if (this.isEditMode) {
        await upRole({
          ...this.model,
           menuIdList,
        });
      } else {
        const { id, ...model } = this.model;
        await addRole({
          ...model,
          menuIdList : this.$refs.menuCheck.get(),
        });
      }
      // 3. 通知父组件，我OK了。
      this.$emit("success");
    },
  },
}

</script>







<style scoped>
.dialog-footer{
  margin-right: 10px;
}
</style>